<template>
  <div class="setting">
    <logo></logo>
    <!-- 设置 -->
    <section class="main-setting">
      <van-tabs @click="onClick">
        <van-tab title="循环设置">
          <!-- 时间列表 -->
          <van-cell-group
            v-for="(item,index) in timeData"
            :key="index"
          >
            <van-field
              v-model="item.StartingTime"
              type="text"
              required
              clearable
              label="开始时间"
              placeholder="请输入开始时间"
            />

            <van-field
              v-model="item.EndTime"
              type="text"
              label="结束时间"
              placeholder="请输入结束时间"
              required
              clearable
            />

            <van-field
              v-model="item.RunningTime"
              type="text"
              label="运行时间"
              placeholder="请输入运行时间"
              required
              clearable
            />

            <van-field
              v-model="item.BreakTime"
              type="text"
              label="关闭时间"
              placeholder="请输入关闭时间"
              required
              clearable
            />

            <van-button
              icon="delete"
              type="warning"
              size="mini"
              class="m-1"
              @click="handerDelete(item.PlanId)"
            >删除</van-button>
            <van-button
              icon="plus"
              size="mini"
              type="info"
              class="m-1"
              @click="handerAddRow"
            >新增</van-button>
            <van-button
              icon="success"
              size="mini"
              type="primary"
              class="m-1"
              @click="handerSave(item,$event)"
            >保存</van-button>
            <div class="separate"></div>
          </van-cell-group>

          <van-cell-group v-show="isShow">
            <van-field
              v-model="timeData.StartingTime"
              type="text"
              required
              clearable
              label="开始时间"
              placeholder="请输入开始时间"
            />

            <van-field
              v-model="timeData.EndTime"
              type="text"
              label="结束时间"
              placeholder="请输入结束时间"
              required
              clearable
            />

            <van-field
              v-model="timeData.RunningTime"
              type="text"
              label="运行时间"
              placeholder="请输入运行时间"
              required
              clearable
            />

            <van-field
              v-model="timeData.BreakTime"
              type="text"
              label="关闭时间"
              placeholder="请输入关闭时间"
              required
              clearable
            />

            <van-button
              icon="delete"
              type="warning"
              size="mini"
              class="m-1"
              @click="handerDelete(timeData.PlanId)"
            >删除</van-button>
            <van-button
              icon="plus"
              size="mini"
              type="info"
              class="m-1"
              @click="handerAddRow"
            >新增</van-button>
            <van-button
              icon="success"
              size="mini"
              type="primary"
              class="m-1"
              @click="handerSave(timeData,$event)"
            >保存</van-button>
            <div class="separate"></div>
          </van-cell-group>

        </van-tab>
        <van-tab title="预警设置">
          <!-- 预警设置 -->
          <van-cell-group>
            <van-field
              center
              clearable
              label="温\湿度\CO₂(秒) :"
              placeholder="请输入温\湿度\CO₂"
              class="my-van-field"
              v-model="wenshiduco2.CollectInterval"
              :id="wenshiduco2.ControllerId"
            >
              <van-button
                slot="button"
                size="small"
                class="my-color-info"
                @click="handerSetting(wenshiduco2.ControllerId,wenshiduco2.CollectInterval)"
              >设置</van-button>
            </van-field>

            <van-field
              center
              clearable
              label="PH\EC\液温(秒) :"
              placeholder="请输入PH\EC\液温"
              class="my-van-field"
              v-model="phec.CollectInterval"
              :id="phec.ControllerId"
            >
              <van-button
                slot="button"
                size="small"
                class="my-color-info"
                @click="handerSetting(phec.ControllerId,phec.CollectInterval)"
              >设置</van-button>
            </van-field>

            <van-field
              center
              clearable
              label="液位(秒) :"
              placeholder="请输入液位"
              class="my-van-field"
              v-model="level.CollectInterval"
              :id="level.ControllerId"
            >
              <van-button
                slot="button"
                size="small"
                class="my-color-info"
                @click="handerSetting(level.ControllerId,level.CollectInterval)"
              >设置</van-button>
            </van-field>

            <van-field
              center
              clearable
              label="光照(秒) :"
              placeholder="请输入光照"
              class="my-van-field"
              v-model="illumination.CollectInterval"
              :id="illumination.ControllerId"
            >
              <van-button
                slot="button"
                size="small"
                class="my-color-info"
                @click="handerSetting(illumination.ControllerId,illumination.CollectInterval)"
              >设置</van-button>
            </van-field>

            <van-field
              center
              clearable
              label="低水位预警(mm):"
              placeholder="请输入低水位预警"
              class="my-van-field"
              v-model="lowWarning.LowWarning"
              :id="lowWarning.SensorId"
            >
              <van-button
                slot="button"
                size="small"
                class="my-color-info"
                @click="handerLowWaterLevel(lowWarning.SensorId,lowWarning.LowWarning)"
              >设置</van-button>
            </van-field>
          </van-cell-group>
        </van-tab>
      </van-tabs>
    </section>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from '@/components/Tabbar.vue'
import logo from '@/components/Logo.vue'
export default {
  name: 'setting',
  components: {
    logo,
    tabbar
  },
  data() {
    return {
      timeData: {
        StartingTime: '00:00:00',
        EndTime: '23:59:59',
        RunningTime: '600',
        BreakTime: '1200',
        PlanId: '',
        EquipmentId: 'e10cd52b-fd23-4cf9-b251-80b8e474cbf2',
        EnabledState: true,
        ExecutionNumber: 1,
        ExecutionCycle: '',
        Name: ''
      },
      // 液位
      level: {
        ControllerId: '',
        CollectInterval: ''
      },
      // phec
      phec: {
        ControllerId: '',
        CollectInterval: ''
      },
      // 光照
      illumination: {
        ControllerId: '',
        CollectInterval: ''
      },
      // 温度，湿度，二氧化碳
      wenshiduco2: {
        ControllerId: '',
        CollectInterval: ''
      },
      // 低水位报警
      lowWarning: {
        SensorId: '',
        LowWarning: ''
      },
      // 就是删除0条数据了，显示默认的一行数据
      isShow: false
    }
  },
  created() {
    this.getTime()
  },
  methods: {
    onClick(name, title) {
      // this.$toast(title)
      // console.log(name)
      if (name === 0) {
        this.getTime()
      } else {
        this.getEarlyWarning()
        this.getLowWaterLevel()
      }
    },
    // 获取时间的数据
    async getTime() {
      const { data: res } = await this.$http.post(`AreaSensor/GetSensorByParams`, {
        TypeId: '54023016-61bd-4bd9-8979-612ac6626b91',
        Includes: 'operationPlans',
        WhetherControl: 1,
        AreaId: '622ad4a7-fc01-4ff8-8069-3e591b120773',
        sidx: 'e.CreatedTime'
      })
      console.log(res[0].operationPlans)
      this.timeData = res[0].operationPlans
      console.log(this.timeData.length)
    },
    // 删除
    async handerDelete(id) {
      console.log(id)
      console.log(this.timeData.length)
      this.timeData.splice(id, 1)
      const { data: res } = await this.$http.post(`OperationPlan/DeleteOperationPlan`, { id: id })
      console.log(res)
      if (res.Message !== '操作成功') return this.$toast.fail('删除失败')
      this.$toast.success('删除成功')
      if (this.timeData.length == 0) {
        this.isShow = true
      }
      this.getTime()
    },
    // 新增
    handerAddRow() {
      this.timeData.push({
        StartingTime: '00:00:00',
        EndTime: '23:59:59',
        RunningTime: '600',
        BreakTime: '1200'
      })
      this.$toast('新增了一行，请填写')
    },
    // 保存
    async handerSave(item, event) {
      console.log(item)
      // target.validity.valid
      // console.log(event)
      const { data: res } = await this.$http.post(`OperationPlan/SaveOperationPlan`, {
        StartingTime: item.StartingTime,
        EndTime: item.EndTime,
        RunningTime: item.RunningTime,
        BreakTime: item.BreakTime,
        EquipmentId: 'e10cd52b-fd23-4cf9-b251-80b8e474cbf2',
        EnabledState: true,
        ExecutionNumber: 1,
        ExecutionCycle: '',
        Name: '',
        PlanId: item.PlanId
      })
      console.log(res.Message)
      if (res.Message !== '操作成功') return this.$toast.fail('保存失败')
      this.$toast.success('保存成功')
      this.getTime()
      // console.log(this.timeData)
      // this.timeData.push(this.timeData)
    },
    // 预警设置
    async getEarlyWarning() {
      const { data: res } = await this.$http.post(`AreaControlPanel/GetControllerByParams`, { Id: '622ad4a7-fc01-4ff8-8069-3e591b120773' })
      // console.log(res)
      // 液位
      this.level = res[1]
      // PH、EC、液温
      this.phec = res[2]
      // 光照
      this.illumination = res[3]
      // 温、湿度、CO₂
      this.wenshiduco2 = res[4]
    },
    // 点击设置
    async handerSetting(id, val) {
      console.log(id, val)
      const { data: res } = await this.$http.post(`SocketServer/Operating`, {
        ID: id,
        GatewayType: 0,
        OperationType: 6,
        TaskType: 0,
        Value: val
      })
      console.log(res)
      if (res.Message !== '操作成功') return this.$toast.fail('设置失败')
      this.$toast.success('设置成功')
    },
    // 低水位预警
    async getLowWaterLevel() {
      const { data: res } = await this.$http.post(`AreaSensor/GetById`, {
        Id: 'b3176a8a-a330-4340-baad-cb74ad88fceb'
      })
      console.log(res)
      this.lowWarning = res
    },
    // 低水位预警点击设置
    async handerLowWaterLevel(id, val) {
      console.log(id, val)
      const { data: res } = await this.$http.post(`SocketServer/Operating`, {
        ID: id,
        GatewayType: 0,
        OperationType: 7,
        TaskType: 0,
        Value: '770' + ',' + val
      })
      console.log(res)
      if (res.Message !== '操作成功') return this.$toast.fail('设置失败')
      this.$toast.success('设置成功')
    }
  }
}
</script>

<style lang="less" scoped>
.my-color-info {
  background-color: #17a2b8;
  border-color: #17a2b8;
  color: #fff;
}
</style>